<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能：1.应用于表格【栅格布局】
			      2.行内元素与行内块元素对齐方式
				    理解：文本和图片对齐方式【垂直居中】
					元素种类：
					行内元素：典型行内元素 span，a，文本
					特点：在一行内显示，不可设置宽高
					块级元素：典型块级元素 div，p
					特点；独占一行，可设宽高
					行内块元素：典型行内块元素 img
					特点：可设宽高，在一行内显示
					页面组成：元素之间嵌套生成
					三种元素相互嵌套 √ 嵌套根据元素特点页面混乱
					嵌套条件1： 在一行内显示
					           块套行  √
							   行套行  √
							   行套块  √  增加条件，块添加宽高，造成页面布局混乱
							   块套块  √
					嵌套条件2：独占一行【效果】
					           块套行  √  推荐
					           行套行  ×
					           行套块  ×  增加条件，块添加宽高，造成页面布局混乱
					           块套块  √
			 -->
		<style>
			/* 抓每个img 
			派生（后代）选择器
			抓取父元素中所有后代子元素【元素嵌套特点】
			伪类选择器：
			特点：在选择器后，过滤符合特定条件某个元素
			nth-child：选中父元素中第N个
			符合条件：p中包含4个img
			id抓取父元素：空间大
			class抓取父元素中某个子元素：微调
			*/
			/* p  img:nth-child(1){
				border: 10px solid red;
			}
			p  img:nth-child(2){
				border: 10px solid red;
			} */
			/* 标准抓取每个img方案 */
			p img.baseline{
				vertical-align: baseline;
				/* vertical-align与text-align区别
				 区别1：属性值不同
				    2：vertival-align操作文本和图片垂直
					   text-align操作文本左右和居中以及两边对齐
				 
				 */
			}
			p img top{
				vertical-align: top;
			}
			
		</style>
			
	</head>
	<body>
		<div><span>111</span></div>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>Coser<img class="baseline" src="img/coser.png" alt="Coser" width="55px" height="55px">基线对齐</p>
		<p>猫猫<img class="top" src="img/maomao.jpg" alt="猫猫" width="55px" height="55px">顶部对齐</p>
		<!-- 顶部对齐，中间对齐，底部对齐
		     图片设置宽高：25px~100px
			 -->
			 <!-- 需求：垂直方向属性  4个属性值
			      如果，不改变现有html结构，可以找到依次4个img
				  抓每个---4个图片
				  思路：派生选择器+伪类选择器
				  p img：nth-child(1)
			  -->
	</body>
</html>